<template>
  <ProPanel :groups="groupsBase" :data="stageStore.layerData"> </ProPanel>

  <ProPanel :groups="groups" :data="stageStore.layerData.data">
    <template #backgroundRadiusSelect>
      <el-select v-model="stageStore.layerData.data.backgroundRadiusSelect" @change="changeSelect">
        <el-option v-for="item in 3" :key="item" :label="item" :value="item" />
      </el-select>
    </template>
  </ProPanel>
  <!-- <template #backgroundCornerradius>
    <ElInputNumber :controls="false" v-model="stageStore.layerData.data.backgroundCornerradius" />
  </template> -->
</template>

<script lang="ts" setup>
import { ElInputNumber, ElSelect } from 'element-plus';
import ProPanel from '@/components/pro-panel/index.vue';
import { useStageStore } from '@/store/stage';
import basic from './groups/basic';
import effect from './groups/effect';
import followZoom from './groups/follow-zoom';
import followTransparent from './groups/follow-transparent';

const stageStore = useStageStore();
const groupsBase = computed(() => {
  return [basic];
});

const groups = computed(() => {
  return [effect(), followZoom, followTransparent];
});

const changeSelect = (val: any) => {
  stageStore.layerData.data.backgroundCornerradius = val;
};
</script>

<style lang="less" scoped></style>
